body {
    margin: 0;
}
ul,li{
    padding:0;
    margin:0;
    list-style:none
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
    height:0;
    visibility:hidden;
}


.wrapper{
    margin: 100px auto;
    width: 550px;
    color: #fff;
    font-family: "Microsoft Yahei";
    background-color: #216db2;
}

.clock{
    width: 550px;
    height: 180px;
}
.clock .main{
    box-sizing: border-box;
    width: 100%;
    height: 110px;
    padding: 22px 25px;
}

.clock .main span.abbr{
    visibility: hidden;
}
.clock .main.abbr span.abbr{
    visibility: visible;
}
.clock .timebox{
    float: left;
    width: 300px;
    height: 66px;
    font-size: 0;
}
.clock .timebox span{
    font-size: 55px;
}
.clock .timebox span.small{
    font-size: 30px;
}
.clock .timebox span.abbr{
    margin-right: 10px;
}
.clock .timebox span.second{
    margin-left: 10px;
}

.clock .datebox{
    padding-top: 6px;
    float: left;
    width: 120px;
    height: 60px;
}
.clock .datebox span{
    display: block;
}
.clock .datebox span.week{
    font-size: 20px;
    line-height: 35px;
}
.clock .datebox span.date{
    font-size: 15px;
}

.clock .top,
.clock .bottom{
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: 35px;
    font-size: 15px;
    line-height: 35px;
    background-color: rgba(0, 0, 0, .3);
}
.clock .top .area-select{
    float: right;
    height: 35px;
    border: none;
    outline: none;
}
.clock .top .area-select select{
    border: none;
    outline: none;
    line-height: 35px;
    background: none;
    color: #fff;
}
.clock .top .area-select option{
    border: none;
    outline: none;
    background-color: #003366;
    color: #fff;
    text-align: center;
}

.clock .top .mode{
    cursor: pointer;
    position: relative;
    font-size: 14px;
    float: right;
    margin-left: 40px;
}
/* 伪类实现开关，需使用js配合
const dom = document.querySelector('.mode')
dom.onclick = function(){
    const span = document.querySelector('.mode span');
    span.className = span.className == "off"?"on":"off";
}

.clock .top .mode span::before,
.clock .top .mode span::after{
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: -30px;
    height: 15px;
    border-radius: 7px;
    transition: all .5s;
}
.clock .top .mode span.off::before{
    width: 30px;
    background-color: rgba(255, 255, 255, .2);
}
.clock .top .mode span.off::after{
    width: 15px;
    background-color: rgba(255, 255, 255, .6);
}
.clock .top .mode span.on::before{
    width: 30px;
    background-color: rgba(255, 255, 255, .4);
}
.clock .top .mode span.on::after{
    width: 15px;
    left: -15px;
    background-color: rgba(255, 255, 255, .6);
} */
.clock .top .mode .switch{
    position: absolute;
    top: 10px;
    left: -30px;
}
.mode-switch {
    position: absolute;
    visibility: hidden;
}
.mode-switch + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}
input.mode-switch + label {
    width: 30px;
    height: 15px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 15px;
}
input.mode-switch + label:before,
input.mode-switch + label:after {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    content: "";
}
input.mode-switch + label:before {
    right: 1px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 60px;
    transition: background 0.4s;
}
input.mode-switch + label:after {
    width: 15px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
}
input.mode-switch:checked + label:before {
    background-color: rgba(255, 255, 255, .4);
}
input.mode-switch:checked + label:after {
    margin-left: 15px;
}
.clock .bottom .compare{
    float: right;
}
.clock .bottom .bjtime{
    margin: 15px;
}
.clock .bottom{
    display: none;
}
.weather{
    width: 550px;
    height: 200px;
}
.weather span,
.weather i{
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
}
.weather li{
    float: left;
    box-sizing: border-box;
    width: 110px;
    height: 100%;
    padding: 5px;
}
.weather li i{
    font-size: 60px;
}
